<template>
  <div class="robot">
    <div class="ptHandle">
      <div class="handle-left">
        <a-dropdown @select="handleSelect" position="br">
          <span>{{ ybTitle }}: <a-button class="btn" style="width: 150px">选择区域/组</a-button></span>
          <template #content>
            <a-doption style="zoom: 1.6">{{ ybTitle }}</a-doption>
            <a-doption style="zoom: 1.6">{{ ybGroupTitle }}</a-doption>
          </template>
        </a-dropdown>
        <a-dropdown @select="handleSelect" position="br">
          <span>{{ smTitle }}: <a-button class="btn" style="width: 150px">选择机台/组</a-button></span>
          <template #content>
            <a-doption style="zoom: 1.6">{{ smTitle }}</a-doption>
            <a-doption style="zoom: 1.6">{{ smGroupTitle }}</a-doption>
          </template>
        </a-dropdown>
      </div>
      <div class="handle-mid">
        <span>{{ ybItems }}——>{{ smItems }}</span>
      </div>
      <div class="handle-right">
        <a-button size="large" type="primary" style="zoom: 1.5" @click="ptHandleClick"><span style="font-size: 20px">配台</span></a-button>
      </div>
    </div>
    <div class="handle">
      <h1 style="margin-left: 20px">配台列表</h1>
      <a-button size="large" type="primary" status="success" style="margin-right: 20px; zoom: 1.2" @click="updateTemplate"><span style="font-size: 20px">确认配台</span></a-button>
    </div>
    <div class="table" style="margin: 20px">
      <a-scrollbar style="height: 800px; overflow: auto">
        <a-table :loading="loading" :columns="columns" :data="ptList" :pagination="false" stripe size="large" :bordered="{ cell: true }" :scroll="{ x: '100%', y: '100%' }">
          <template #action="{ record }">
            <a-space>
              <a-popconfirm type="warning" content="确定删除该条数据吗?" position="top" @before-ok="onDelete(record)">
                <a-button type="primary" status="danger" :disabled="record.disabled">
                  <template #icon><icon-delete :size="20" /></template>
                  <span>删除</span>
                </a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table>
      </a-scrollbar>
    </div>
  </div>
  <a-modal v-model:visible="visible" width="90%" :mask-closable="false" @ok="save" @cancel="close" draggable style="zoom: 1.2" fullscreen>
    <template #title>
      <span style="font-size: 24px">{{ title }}</span>
    </template>
    <!-- <a-scrollbar style="height: 500px; overflow: auto"> -->
    <div
      :class="machinecheckbox.includes(item) ? 'machine_box_active' : 'machine_box'"
      v-for="(item, index) in machine"
      :key="index"
      :style="computeStyle(item, index)"
      @click="changeMachine(item)"
    >
      {{ item.machine_name }}
    </div>
    <!-- </a-scrollbar> -->
    <template #footer>
      <div class="footer">
        <a-button @click="close" style="width: 48%; height: 50px; font-size: 28px; color: #fff; background-color: #ccc">取消</a-button>
        <a-button type="primary" @click="save" style="width: 48%; height: 50px; font-size: 28px">确认</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import useMainStore from '../../store/main/main'
import useSetStore from '../../store/setting/setting'
const mainStore = useMainStore()
const setStore = useSetStore()
// mainmachine.getmachineAreaList()

const loading = ref(false)
const { yb_machine, sm, ptList, group } = storeToRefs(mainStore)
const { setting } = storeToRefs(setStore)
const smTitle = computed(() => {
  return setting.value.process == '梳并工序' ? '梳棉机台' : '末并机台'
})
const smGroupTitle = computed(() => {
  return setting.value.process == '梳并工序' ? '梳棉机组' : '末并机组'
})
const ybTitle = computed(() => {
  return setting.value.process == '梳并工序' ? '预并区域' : '粗纱机台'
})
const ybGroupTitle = computed(() => {
  return setting.value.process == '梳并工序' ? '预并机组' : '粗纱机组'
})
const columns = [
  {
    title: ybTitle.value,
    dataIndex: 'machine_empty',
    fixed: 'left',
    align: 'center',
    width: 650
  },
  {
    title: smTitle.value,
    dataIndex: 'machine_full',
    align: 'center'
  },
  { title: '操作', width: 200, slotName: 'action', align: 'center' }
]
const visible = ref(false)
const title = ref('')
const machine = ref()
const showYbMachine = () => {
  title.value = ybTitle.value
  machine.value = yb_machine.value
  visible.value = true
}
const showSmMachine = () => {
  title.value = smTitle.value
  machine.value = sm.value
  visible.value = true
}
const showYbMachineGroup = () => {
  title.value = ybGroupTitle.value
  const ybgroup = group.value.filter((item) => {
    return item.group_type == ybGroupTitle.value
  })
  machine.value = ybgroup.map((item) => {
    return {
      machine_name: item.group_name,
      group_member: item.group_member,
      breed_color: '#333'
    }
  })
  visible.value = true
}
const showSmMachineGroup = () => {
  title.value = smGroupTitle.value
  const smgroup = group.value.filter((item) => {
    return item.group_type === smGroupTitle.value
  })
  machine.value = smgroup.map((item) => {
    return {
      machine_name: item.group_name,
      group_member: item.group_member,
      breed_color: '#333'
    }
  })
  visible.value = true
}
const machinecheckbox = ref([])
const ybItems = ref()
const smItems = ref()
function changeMachine(item, index) {
  var idx = machinecheckbox.value.indexOf(item)
  //如果已经选中了，那就取消选中，如果没有，则选中
  if (idx != -1) {
    machinecheckbox.value.splice(idx, 1)
  } else {
    machinecheckbox.value.push(item)
  }
}
const close = () => {
  machinecheckbox.value = []
  visible.value = false
}
const computeStyle = (item) => {
  let style = {
    backgroundColor: ''
    // width: setting.value.ybArea.number * 80
  }
  if (item.breed_color != '') {
    if (item.breed_name !== '通用') {
      style.backgroundColor = item.breed_color
    } else {
      style.backgroundColor = '#333'
    }
  } else {
    style.backgroundColor = 'green'
  }
  return style
}
const save = () => {
  if (title.value == ybTitle.value) {
    ybItems.value = machinecheckbox.value.map((item) => {
      return item.machine_name
    })
  }
  if (title.value == smTitle.value) {
    smItems.value = machinecheckbox.value.map((item) => {
      return item.machine_name
    })
  }
  if (title.value == ybGroupTitle.value) {
    ybItems.value = machinecheckbox.value.map((item) => {
      return item.group_member.join(',')
    })
  }
  if (title.value == smGroupTitle.value) {
    smItems.value = machinecheckbox.value.map((item) => {
      return item.group_member.join(',')
    })
  }
  close()
}
const ptHandleClick = () => {
  mainStore.getDispatchAdd({
    machine_empty: ybItems.value,
    machine_full: smItems.value
  })
}
const updateTemplate = () => {
  loading.value = true
  mainStore
    .getTaskareaEdit()
    .then(() => {
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}
const onDelete = (item) => {
  mainStore.getDispatchDelete(item)
}
const handleSelect = (item) => {
  if (item == ybTitle.value) {
    showYbMachine()
  }
  if (item == ybGroupTitle.value) {
    showYbMachineGroup()
  }
  if (item == smTitle.value) {
    showSmMachine()
  }
  if (item == smGroupTitle.value) {
    showSmMachineGroup()
  }
}
</script>

<style lang="less" scoped>
.footer {
  display: flex;
  justify-content: space-between;
}
:deep(.arco-table-th) {
  background-color: #1c62bb;
}
:deep(.arco-btn-size-medium) {
  height: 40px;
  // width: 140px;
  // padding: 8px 20px;
  font-size: 24px;
}
:deep(.arco-table-th-title) {
  font-size: 30px;
  color: #fff;
}
:deep(.arco-table-td-content) {
  font-size: 30px;
}
.handle {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ptHandle {
  height: 100px;
  margin: 20px;
  border: 2px solid #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  .handle-left {
    width: 600px;
    font-size: 24px;
    color: #000;
    font-weight: 500;
    span {
      margin-left: 20px;
      :deep(.arco-btn-size-medium) {
        font-size: 24px;
        font-weight: 500;
        color: #fff;
        height: 50px;
        width: 120px;
        background-color: #1c62bb;
      }
    }
  }
  .handle-mid {
    font-size: 18px;
    color: #000;
    font-weight: 500;
    width: 1180px;
    text-align: center;
  }
}
.machine_box {
  box-sizing: border-box;
  width: 104px;
  height: 55px;
  border: 1px solid #000;
  float: left;
  margin: 7px;
  text-align: center;
  line-height: 55px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
}
.machine_box_active {
  box-sizing: border-box;
  width: 104px;
  height: 55px;
  border: 6px solid red;
  float: left;
  margin: 7px;
  text-align: center;
  line-height: 43px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
}
</style>
